<template>
    <div class="movie-nav">
        <div class="city-box">
            <span>上海</span>
            <svg t="1556616045552" class="icon" style="" viewBox="0 0 1707 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2786" xmlns:xlink="http://www.w3.org/1999/xlink" width="8" height="8"><path d="M122.869341 2.22352 851.98782 0 1584.920784 6.472488C1629.474237 6.472488 1668.639278 8.883431 1681.652405 18.846672 1713.071326 42.900724 1709.638076 92.031136 1681.652405 119.893283L905.874092 969.356564C891.086834 984.207717 871.349905 990.556674 851.928185 989.602521 832.502205 990.558804 812.82704 984.207717 797.975887 969.356564L22.199706 119.895415C-5.722077 92.033265-8.769832 43.352245 22.199706 18.914826 36.607856 7.5523 61.684215 2.22352 122.869341 2.22352L122.869341 2.22352Z" p-id="2787"></path></svg>
        </div>
        <div class="nav-box">
            <ul>
                <router-link to="/movie/n-hot" tag="li" active-class="active">
                    正在热映
                </router-link>
                <router-link to="/movie/f-hot" tag="li" active-class="active">
                    即将上映
                </router-link>
            </ul>
        </div>
        <div class="search-box">
            <svg t="1556615418805" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1984" xmlns:xlink="http://www.w3.org/1999/xlink" width="23" height="23"><path d="M898.036124 852.92674 748.500389 703.389982c49.522903-62.73788 79.244832-142.968156 79.244832-230.408647 0-200.905706-156.887167-363.772051-350.416881-363.772051S126.911458 272.075629 126.911458 472.981335s156.887167 363.772051 350.416881 363.772051c78.338183 0 150.670581-26.688849 209.025641-71.782883l149.819191 149.819191L898.036124 852.92674zM476.93232 751.116983c-147.9711 0-267.924075-124.526131-267.924075-278.135648s119.953999-278.135648 267.924075-278.135648 267.924075 124.526131 267.924075 278.135648S624.903419 751.116983 476.93232 751.116983z" p-id="1985"></path></svg>
        </div>
    </div>
</template>

<script>
export default {
    
}
</script>

<style lang="stylus" scoped>
    @import '~Css/_variable.styl'
    @import '~Css/_border.styl'
    .movie-nav
        display flex
        height 0.44rem
        line-height 0.44rem
        border 0 0 1px 0 , $borderColor
        .city-box
            display flex
            justify-content center
            align-items center
            flex 70
            svg
                padding-left .04rem
                fill $triangleColor
        .nav-box
            flex 255
            ul
                display flex
                justify-content space-between
                padding 0 .2rem
                height 100%
                font-weight 700
                li
                    flex 1
                    display flex
                    justify-content center
                    align-items center
                    margin 0 .12rem
                    color #666
                    &.active
                        color $themeColor
                        border-bottom 2px solid $themeColor
        .search-box
            flex 50
            display flex
            justify-content center
            align-items center
            svg 
                fill $themeColor
</style>
